<template>
  <!-- 自定义歌单 路由组件 这个组件就牛杯了 请仔细看 -->
  <div class="mine-music-list">
    <!-- 创建歌单 -->
    <div
      class="el-icon-edit-outline create-music-list"
      @click="createMusicListHandler"
    >
      创建歌单
    </div>

    <!-- 自定义歌单列表 -->
    <ul class="mine-music" v-show="mineMusicLists.length">
      <!-- 点击就打开相对于的歌单列表 -->
      <li
        @click="
          TOASTOPERA({
            toastShow: true,
            toastData: mineMusicListObj[musicListName],
            title: musicListName,
            custom: true,
          })
        "
        class="mine-music-item"
        v-for="musicListName in mineMusicLists"
        :key="musicListName"
      >
        <!-- 自定义歌单名称 -->
        <div class="mine-music-name">{{ musicListName }}</div>
        <el-popconfirm
          title="结果不可逆,是否确认删除?"
          icon="el-icon-warning"
          @confirm="confirmHandler(musicListName)"
        >
          <!-- 删除自定义歌单 -->
          <div class="mine-music-del" slot="reference" @click.stop>删除</div>
        </el-popconfirm>
      </li>
    </ul>
    <!-- 空状态 -->
    <EmptyTips v-show="!mineMusicLists.length" tips="暂无歌单"></EmptyTips>
  </div>
</template>

<script>
import EmptyTips from "@/components/public/EmptyTips";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "MineMusicList",
  components: { EmptyTips },
  computed: {
    /* 计算有多少个用户自定义歌单 */
    ...mapGetters("music", ["mineMusicLists"]),
    /* 获取整个自定义歌单对象 */
    ...mapState("music", ["mineMusicListObj"]),
  },
  methods: {
    /* 加载 弹出层操作 删除自定义歌单操作 函数 */
    ...mapMutations("music", ["TOASTOPERA", "DELETEMUSICLIST"]),
    /* 创建自定义歌单 */
    ...mapActions("music", ["createMusicList"]),
    /* 创建自定义歌单 业务处理 */
    createMusicListHandler() {
      this.$prompt("请输入歌单名称", "创建歌单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        closeOnClickModal: false,
        center: true,
      })
        .then(({ value }) => {
          if (!value) {
            this.$message({
              type: "error",
              message: "创建失败！歌单名称为空！",
            });
            return;
          }
          /* 提交后台 */
          this.createMusicList(value);
        })
        .catch(() => {});
    },
    /* 删除自定义歌单 业务处理 */
    confirmHandler(name) {
      /* 提交后台 */
      this.DELETEMUSICLIST(name);
    },
  },
};
</script>

<style lang="less" scoped>
.mine-music-list {
  position: relative;
  height: 5rem;
  overflow: auto;

  .create-music-list {
    position: absolute;
    top: 0;
    right: 0.4rem;
    cursor: pointer;
  }
  .mine-music {
    padding-top: 0.5rem;
    .mine-music-item {
      width: 80%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;
      .mine-music-del {
        cursor: pointer;
      }
    }
  }
}
@media screen and (max-width: 900px) {
  .mine-music-list {
    .mine-music {
      .mine-music-item {
        width: auto;
        padding-right: 0.2rem;
      }
    }
  }
}
</style>